<template>
  <div id="box">
       <div class="top">
        <el-input v-model="filterText"    placeholder="请输入部门"  class="input"/>


              <el-button type="primary" @click="filterText">查询</el-button>
              <el-button type="success">添加</el-button>


       </div>


       <div class="center">


           <el-tree :data="data.list" :props="defaultProps"   class="centerbox" 
              node-key="id"
                ref="treeRef"
                    default-expand-all

    highlight-current
   
            :expand-on-click-node="false"
           >

         <template  #default="{ data }" >
          <div class="span">

                <span>{{ data.name }}</span>
           <span>
     
                   
                            <el-button type="success" class="btn">修改</el-button>
                 <el-button type="danger" class="btn" @click="del( data)">删除</el-button>
          

          
           
     
           </span>
          </div>
       
           
      </template>

    </el-tree>

       </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted,ref,reactive,watch } from 'vue'

  import {departmentlist,departmentdel} from '../../api/chart/keyboard'
import { ElTree } from 'element-plus'



const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()




    watch(filterText, (val) => {
  treeRef.value!.filter(val)
})





const data = reactive({
  list: [],
});

const defaultProps = {
  children: 'son',
  label: 'name',
}
                                                                       




  const list=async()=>{
    console.log(6);
    const res:any = await departmentlist()
    console.log(res);
    data.list=res.data

      
    
  }


  const del=async(data: any)=>{
    
      // console.log(id);
      console.log(data);
      console.log(data.id);
      const id=data.id
       const res=await departmentdel({id})
  console.log(res);
      list()
  }









  onMounted(()=>{
      list()
  })

</script>

<style lang="less" scoped>
@import url("../../assets/css/chart/keyboard.less");
</style>